<template>
  <view class="container">
    <!-- 日历组件 -->
    <view class="calendar-container">
      <view class="calendar-header">
        <text class="month-text">{{ currentMonth }}</text>
        <view class="calendar-controls">
          <text class="iconfont icon-left" @click="changeMonth(-1)"></text>
          <text class="iconfont icon-right" @click="changeMonth(1)"></text>
        </view>
      </view>
      
      <view class="calendar-grid">
        <view class="weekday-row">
          <text v-for="day in weekDays" :key="day" class="weekday">{{ day }}</text>
        </view>
        <view class="days-grid">
          <view
            v-for="(day, index) in calendarDays"
            :key="index"
            class="day-cell"
            :class="{
              'other-month': day.otherMonth,
              'today': day.isToday,
              'selected': isSelectedDay(day),
              'has-reminder': day.hasReminder
            }"
            @click="selectDate(day)"
          >
            <text class="day-number">{{ day.date }}</text>
            <view v-if="day.hasReminder" class="reminder-dot"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 返回今天按钮 -->
    <view v-if="!isSelectedToday" class="back-today" @click="backToToday">
      <text class="iconfont icon-calendar"></text>
      <text>返回今天</text>
    </view>
    
    <!-- 当日用药提醒列表 -->
    <view class="reminders-container" v-if="selectedDateReminders.length > 0">
      <text class="section-title">{{ selectedDateFormatted }}用药提醒</text>
      <view class="reminder-list">
        <view
          v-for="(reminder, index) in selectedDateReminders"
          :key="index"
          class="reminder-item"
        >
          <view class="reminder-time-status">
            <text class="reminder-time">{{ reminder.time }}</text>
            <text class="reminder-status" :class="reminder.status">
              {{ getReminderStatus(reminder.status) }}
            </text>
          </view>
          <view class="reminder-medicine">
            <text class="medicine-name">{{ reminder.medicineName }}</text>
            <text class="medicine-dosage">{{ reminder.dosage }}</text>
          </view>
          <view class="reminder-actions">
            <button
              v-if="reminder.status === 'pending'"
              class="take-button"
              @click="takeMedicine(reminder)"
            >服用</button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 无提醒数据展示 -->
    <view v-else class="empty-state">
      <image src="/static/empty-calendar.png" mode="aspectFit" class="empty-image" />
      <text class="empty-text">当日暂无用药提醒</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { MedicineReminder } from '@/types'

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 星期显示文本
const weekDays = ['日', '一', '二', '三', '四', '五', '六']

// 当前日期相关数据
const currentDate = ref(new Date())
const selectedDate = ref(new Date())

// 计算当前月份显示文本
const currentMonth = computed(() => {
  return `${currentDate.value.getFullYear()}年${currentDate.value.getMonth() + 1}月`
})

// 计算选中日期的格式化文本
const selectedDateFormatted = computed(() => {
  return `${selectedDate.value.getMonth() + 1}月${selectedDate.value.getDate()}日`
})

// 生成日历网格数据
const calendarDays = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  
  const days = []
  const firstDayWeekday = firstDay.getDay()
  
  // 上个月的日期
  for (let i = firstDayWeekday - 1; i >= 0; i--) {
    const date = new Date(year, month, -i)
    days.push({
      date: date.getDate(),
      otherMonth: true,
      isToday: false,
      hasReminder: false
    })
  }
  
  // 当前月的日期
  for (let i = 1; i <= lastDay.getDate(); i++) {
    const date = new Date(year, month, i)
    days.push({
      date: i,
      otherMonth: false,
      isToday: isToday(date),
      hasReminder: hasReminder(date)
    })
  }
  
  // 下个月的日期
  const remainingDays = 42 - days.length
  for (let i = 1; i <= remainingDays; i++) {
    days.push({
      date: i,
      otherMonth: true,
      isToday: false,
      hasReminder: false
    })
  }
  
  return days
})

// 模拟选中日期的提醒数据
const selectedDateReminders = ref<MedicineReminder[]>([
  {
    id: 1,
    time: '08:00',
    medicineName: '感冒药',
    dosage: '2片',
    status: 'pending'
  },
  {
    id: 2,
    time: '12:00',
    medicineName: '维生素C',
    dosage: '1片',
    status: 'completed'
  },
  {
    id: 3,
    time: '19:00',
    medicineName: '钙片',
    dosage: '1片',
    status: 'missed'
  }
])

// 切换月份
const changeMonth = (delta: number) => {
  const newDate = new Date(currentDate.value)
  newDate.setMonth(newDate.getMonth() + delta)
  currentDate.value = newDate
}

// 选择日期
const selectDate = (day: any) => {
  if (!day.otherMonth) {
    const newDate = new Date(currentDate.value)
    newDate.setDate(day.date)
    selectedDate.value = newDate
    // TODO: 获取选中日期的提醒数据
  }
}

// 判断是否是今天
const isToday = (date: Date) => {
  const today = new Date()
  return date.getFullYear() === today.getFullYear() &&
    date.getMonth() === today.getMonth() &&
    date.getDate() === today.getDate()
}

// 判断日期是否有提醒
const hasReminder = (date: Date) => {
  // TODO: 检查日期是否有提醒数据
  return Math.random() > 0.8
}

// 获取提醒状态文本
const getReminderStatus = (status: string) => {
  const statusMap = {
    pending: '待服用',
    completed: '已服用',
    missed: '已错过'
  }
  return statusMap[status] || ''
}

// 服用药品
const takeMedicine = (reminder: MedicineReminder) => {
  // TODO: 更新提醒状态
  reminder.status = 'completed'
  uni.showToast({
    title: '已记录服用',
    icon: 'success'
  })
}

// 判断是否是选中的日期
const isSelectedDay = (day: any) => {
  if (day.otherMonth) return false
  const date = new Date(currentDate.value)
  date.setDate(day.date)
  return date.getFullYear() === selectedDate.value.getFullYear() &&
    date.getMonth() === selectedDate.value.getMonth() &&
    date.getDate() === selectedDate.value.getDate()
}

// 判断选中日期是否是今天
const isSelectedToday = computed(() => {
  const today = new Date()
  return selectedDate.value.getFullYear() === today.getFullYear() &&
    selectedDate.value.getMonth() === today.getMonth() &&
    selectedDate.value.getDate() === today.getDate()
})

// 返回今天
const backToToday = () => {
  selectedDate.value = new Date()
  currentDate.value = new Date()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 40rpx;
  position: relative;
}

.calendar-container {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .month-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .calendar-controls {
      display: flex;
      gap: 40rpx;
      
      .iconfont {
        font-size: 36rpx;
        color: #666666;
      }
    }
  }
  
  .calendar-grid {
    .weekday-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-bottom: 20rpx;
      
      .weekday {
        text-align: center;
        font-size: 28rpx;
        color: #999999;
      }
    }
    
    .days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8rpx;
      
      .day-cell {
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 12rpx;
        
        &.other-month {
          .day-number {
            color: #cccccc;
          }
        }
        
        &.today {
          background: #018d71;
          
          .day-number {
            color: #ffffff;
          }
        }
        
        &.selected:not(.today) {
          background: rgba(1, 141, 113, 0.1);
          border: 2rpx solid #018d71;
          
          .day-number {
            color: #018d71;
          }
        }
        
        &.has-reminder {
          .reminder-dot {
            width: 8rpx;
            height: 8rpx;
            border-radius: 50%;
            background: #018d71;
            position: absolute;
            bottom: 8rpx;
          }
        }
        
        .day-number {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
}

.reminders-container {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .reminder-list {
    .reminder-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .reminder-time-status {
        width: 180rpx;
        
        .reminder-time {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 8rpx;
        }
        
        .reminder-status {
          font-size: 24rpx;
          padding: 4rpx 16rpx;
          border-radius: 24rpx;
          
          &.pending {
            color: #018d71;
            background: rgba(1, 141, 113, 0.1);
          }
          
          &.completed {
            color: #52c41a;
            background: rgba(82, 196, 26, 0.1);
          }
          
          &.missed {
            color: #f5222d;
            background: rgba(245, 34, 45, 0.1);
          }
        }
      }
      
      .reminder-medicine {
        flex: 1;
        padding: 0 20rpx;
        
        .medicine-name {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 8rpx;
        }
        
        .medicine-dosage {
          font-size: 24rpx;
          color: #999999;
        }
      }
      
      .reminder-actions {
        .take-button {
          font-size: 24rpx;
          color: #ffffff;
          background: #018d71;
          border-radius: 32rpx;
          padding: 8rpx 24rpx;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}

.back-today {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  background: #ffffff;
  border-radius: 40rpx;
  padding: 16rpx 32rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  
  .iconfont {
    font-size: 32rpx;
    color: #018d71;
  }
  
  text {
    font-size: 28rpx;
    color: #018d71;
  }
}
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 40rpx;
  position: relative;
}

.calendar-container {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .month-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .calendar-controls {
      display: flex;
      gap: 40rpx;
      
      .iconfont {
        font-size: 36rpx;
        color: #666666;
      }
    }
  }
  
  .calendar-grid {
    .weekday-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-bottom: 20rpx;
      
      .weekday {
        text-align: center;
        font-size: 28rpx;
        color: #999999;
      }
    }
    
    .days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8rpx;
      
      .day-cell {
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 12rpx;
        
        &.other-month {
          .day-number {
            color: #cccccc;
          }
        }
        
        &.today {
          background: #018d71;
          
          .day-number {
            color: #ffffff;
          }
        }
        
        &.selected:not(.today) {
          background: rgba(1, 141, 113, 0.1);
          border: 2rpx solid #018d71;
          
          .day-number {
            color: #018d71;
          }
        }
        
        &.has-reminder {
          .reminder-dot {
            width: 8rpx;
            height: 8rpx;
            border-radius: 50%;
            background: #018d71;
            position: absolute;
            bottom: 8rpx;
          }
        }
        
        .day-number {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
}

.reminders-container {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .reminder-list {
    .reminder-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .reminder-time-status {
        width: 180rpx;
        
        .reminder-time {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 8rpx;
        }
        
        .reminder-status {
          font-size: 24rpx;
          padding: 4rpx 16rpx;
          border-radius: 24rpx;
          
          &.pending {
            color: #018d71;
            background: rgba(1, 141, 113, 0.1);
          }
          
          &.completed {
            color: #52c41a;
            background: rgba(82, 196, 26, 0.1);
          }
          
          &.missed {
            color: #f5222d;
            background: rgba(245, 34, 45, 0.1);
          }
        }
      }
      
      .reminder-medicine {
        flex: 1;
        padding: 0 20rpx;
        
        .medicine-name {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 8rpx;
        }
        
        .medicine-dosage {
          font-size: 24rpx;
          color: #999999;
        }
      }
      
      .reminder-actions {
        .take-button {
          font-size: 24rpx;
          color: #ffffff;
          background: #018d71;
          border-radius: 32rpx;
          padding: 8rpx 24rpx;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>